<template>
	<view class="song_detail_menu">
		<view class="header">
			<image class="bg-image" :src="coverImgUrl" mode="aspectFill"></image>
			<view class="bg-cover"></view>
			<view class="content">
				<image :src="coverImgUrl" mode="aspectFill" class="image"></image>
				<view class="info">
					<view class="title">{{name}}</view>
					<view class="anthor">
						<image class="avatar" mode="aspectFill" :src="avatar"></image>
						<view class="nickname">{{nickname}}</view>
					</view>
					<view class="desc">简介：{{desc}}</view>
				</view>
			</view>
			<view class="operation">
				<view class="favor item">
					<image class="icon" mode="widthFix" src="../../static/favor_icon.png"></image>
					<text class="text">{{playCount}}</text>
				</view>
				<view class="share item">
					<image class="icon" mode="widthFix" src="../../static/share_icon.png"></image>
					<text class="text">分享</text>
				</view>
			</view>
		</view>
		<view class="main">
			<block v-for="(item, index) in songs" :key="item.id">
				<view class="item" @click="handleSongClick(item.id, index)">
					<song-item :index="index"
										 :singer="item.ar[0].name"
										 :songName="item.name"/>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { setStore } from '../../util/storage.js'
	import { getMenuDetail } from '../../service/music_api.js'
	import songItem from '../../components/song-item/song-item.vue'
	
	export default {
		components:{
			songItem
		},
		data() {
			return{
				coverImgUrl: '',
				desc: '',
				name: '',
				songs: [],
				avatar: '',
				nickname: '',
				playCount: 0
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods:{
			async getDetail(id) {
				const res = await getMenuDetail(id)
				this.coverImgUrl = res.data.playlist.coverImgUrl
				this.desc = res.data.playlist.description
				this.name = res.data.playlist.name
				this.songs = res.data.playlist.tracks
				this.avatar = res.data.playlist.creator.avatarUrl
				this.nickname = res.data.playlist.creator.nickname
				this.playCount = res.data.playlist.playCount
			},
			handleSongClick(id, index) {
				setStore('playlist', {
					songIndex: index,
					songLists: this.songs
				})
				uni.navigateTo({
					url: '../music_player/music_player?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.song_detail_menu {
		width: 100vw;
	}
	.header {
	  width: 100vw;
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  height: 450rpx;
	  color: #fff;
	}
	
	.header .bg-image {
	  position: absolute;
	  z-index: -1;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	
	.header .bg-cover {
	  position: absolute;
	  z-index: -1;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,.5);
	  backdrop-filter: blur(5px);
	}
	
	.content {
	  display: flex;
	  margin-top: 60rpx;
	  padding: 0 50rpx;
	}
	
	.content .image {
	  width: 220rpx;
	  height: 220rpx;
	  border-radius: 16rpx;
	}
	
	.content .info {
	  position: relative;
	  height: 220rpx;
	  flex: 1;
	  margin-left: 50rpx;
	}
	
	.content .anthor {
	  margin-top: 20rpx;
	  display: flex;
	  align-items: center;
	}
	
	.content .anthor .avatar {
	  width: 50rpx;
	  height: 50rpx;
	  border-radius: 25rpx;
	}
	
	.content .anthor .nickname {
	  font-size: 24rpx;
	  margin-left: 18rpx;
	}
	
	.content .info .desc {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  margin-top: 30rpx;
	  font-size: 24rpx;
	  display: inline-block;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
.operation {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  margin-top: 30rpx;
}

.operation .item {
  display: flex;
  align-items: center;
}

.operation .item .icon {
  width: 48rpx;
  margin-right: 10rpx;
}

.operation .item .text {
  font-size: 28rpx;
}
</style>
